<template>
  <div style="width: 100%; min-height: 60vh" class="animated fadeInLeft">
    <!-- 广告位置 -->
    <div
      v-loading="!adShow"
      style="height: 100px"
      element-loading-text="加载中..."
      element-loading-background="#f2f0f4"
      v-if="!adShow"
    ></div>
    <ad-item
      :dataList="adList.top"
      style="margin-bottom: 20px"
      v-if="adShow"
    ></ad-item>
    <div
      v-loading="!showVideo"
      style="height: 300px"
      element-loading-text="加载中..."
      element-loading-background="#f2f0f4"
      v-if="!showVideo"
    ></div>
    <video-item
      :video="video"
      :mobile="mobile"
      :type="type"
      v-if="showVideo && videoModel && isShow"
      @like="onLike"
      @collect="onCollect"
      :hobby="hobby"
      @open="onOpenBy"
    ></video-item>
    <div
      style="margin-top: 20px; width: 70%; margin-left: 15%"
      :class="{ mb: mobile === 'false' ? true : false }"
    >
      <div class="video-group" v-if="mobile === 'false' ? true : false">
        <div v-for="item of dataList" :key="item.id">
          <homeVideoItem :data="item" @change="onChange"></homeVideoItem>
        </div>
      </div>
      <div v-else class="video-pc">
        <div v-for="item of dataList" :key="item.id">
          <homeVideoPc :data="item" @change="onChange"></homeVideoPc>
        </div>
      </div>
    </div>
    <!-- 广告位置 -->
    <div
      v-loading="!adShow"
      style="height: 100px"
      element-loading-text="加载中..."
      element-loading-background="#f2f0f4"
      v-if="!adShow"
    ></div>
    <ad-item
      :dataList="adList.bottom"
      style="margin-top: 20px"
      v-if="adShow"
    ></ad-item>
  </div>
  <div
    v-loading="buyVideo"
    element-loading-text="请稍后..."
    element-loading-background="rgba(122, 122, 122, 0.8)"
    class="mask"
    v-if="buyVideo"
  ></div>

  <buy-item
    ref="buyRef"
    @buy="onBuy"
    :title="video?.title"
    :type="video?.type"
    @close="onClose"
  ></buy-item>
</template>

<script setup>
import request from "@/assets/js/request";
import { ElMessage } from "element-plus";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import videoItem from "@/components/video/video-item.vue";
import adItem from "@/components/ad/ad-item.vue";
import homeVideoItem from "@/components/video/detail/home-video-item.vue";
import homeVideoPc from "@/components/video/detail/home-video-pc.vue";
import buyItem from "@/components/other/buy-video.vue";

const vid = ref(null);
const route = useRoute();
const video = ref();
const mobile = ref();
const adShow = ref(false);
const type = ref(false);
const showVideo = ref(false);
const videoModel = ref(true);
const adList = ref([]);
const pageNum = ref(1);
const dataList = ref([]);
const loading = ref(false);
const buyVideo = ref(false);
const buyRef = ref();
const hobby = ref({
  isLike: false,
  isCollect: false,
});
const isShow = ref(true);
const count = ref(5);


const getVideoInfo = () => {
  request
    .get(`/client/video/info?vid=${vid.value}`)
    .then((res) => {
      video.value = res.data;
      showVideo.value = true;
      hobby.value.isLike = res.data.isLike;
      hobby.value.isCollect = res.data.isCollect;
    })
    .catch((err) => {
      ElMessage.error(err.message);
      showVideo.value = true;
    });
};

// 判断是否能够播放该视频
const isRole = () => {
  if (vid.value === undefined || vid.value === null) {
    ElMessage.warning("未找到资源 ");
    return;
  }
  request
    .get(`/client/video/type?vid=${vid.value}`)
    .then((res) => {
      if (res.code === 200) {
        type.value = res.data;
        getVideoInfo();
      }
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
};

const onChange = (id) => {
  vid.value = id;
  showVideo.value = false;
  getVideoInfo();
};

const onOpenBy = () => {
  buyRef.value.open(video.value.gold);
  // isShow.value = false;
};

const onClose = () => {
  isShow.value = true;
};

const getAdList = () => {
  request
    .get("/client/ad/type-ad")
    .then((res) => {
      if (res.code === 200) {
        adList.value = res.data;
        adShow.value = true;
      }
    })
    .catch((err) => {
      ElMessage.error(err.message);
      adShow.value = true;
    });
};

const onLike = (id, model) => {
  countDown();
  request
    .get(`/client/video/like?vid=${id}&model=${model}`)
    .then((res) => {
      if (res.code === 200) {
        ElMessage.success(model == 1 ? "点赞成功" : "取消成功");
        hobby.value.isLike = model === 1 ? true : false;
        count.value -= 1;
      }
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
};
const onCollect = (id, model) => {
  countDown();
  request
    .get(`/client/video/collect?vid=${id}&model=${model}`)
    .then((res) => {
      if (res.code === 200) {
        ElMessage.success(model == 1 ? "收藏成功" : "取消成功");
        hobby.value.isCollect = model === 1 ? true : false;
        count.value -= 1;
      }
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
};

const countDown = () => {
  if (count.value <= 0) {
    ElMessage.warning("不要点击太频繁哦");
    setTimeout(() => {
      count.value = 5;
    }, 5000);
    return;
  }
};

const getDataList = () => {
  loading.value = true;
  request
    .get(`/client/video/list?pageNum=${pageNum.value}`)
    .then((res) => {
      if (res.code === 200) {
        dataList.value.push(...res.data.list);
        pageNum.value += 1;
        loading.value = false;
      }
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
};

const onBuy = () => {
  buyVideo.value = true;
  request
    .get(`/client/video/buy?vid=${video.value.id}`)
    .then((res) => {
      buyVideo.value = false;
      if (res.code === 200) {
        ElMessage.success("购买成功");
        getVideoInfo();
        isRole();
      }
    })
    .catch((err) => {
      ElMessage.error(err.message);
      buyVideo.value = false;
      isShow.value = true
    });
};

onMounted(() => {
  vid.value = route.query.vid;
  isRole();
  mobile.value = localStorage.getItem("mobile");
  getAdList();
  getDataList();
});
</script>

<style scoped lang="scss">
@mixin group-video($group, $gapWidth) {
  display: grid;
  grid-template-columns: repeat($group, 1fr);
  grid-gap: $gapWidth;
  align-items: center;
  justify-content: center;
}

.video-group {
  @include group-video(2, 10px);
}

.video-pc {
  @include group-video(5, 20px);
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 999;
}

.mb {
  width: 100% !important;
  margin-left: 0 !important;
}
</style>
